﻿<html>

<head>
    <script type="text/javascript" src="jquery.js"></script>
    <script>
        
        $(document).ready(function () {
            $(".chess").click(function () {

                if($(".flag").html()=='白棋走'){
                    $(this).css("background","url(images/black1.png)");
                    $(".flag").html("黑棋走");
                }else{
                    $(this).css("background","url(images/white1.png)");
                    $(".flag").html("白棋走");
                }
                
            });

            $(".clear").click(function(){
                $(".chess").css("background","");
            });
        });
    </script>
    <style>
        .chessMain{
            background-image: url(images/chessboard.png);
            border: 10px solid blue;
            width: 513px;
            height: 513px;
        }
        .chess{
            float: left;;
            width: 36px;
            height: 36px;   
        }
        .first{
            margin-top: 22px;
            margin-left: 22px;
        }
        .second{
            margin-left: 22px;
        }
        .clear,.flag{
            width:80px;
            height: 30px;
            border: 2px solid blue;
            text-align: center;
            line-height: 30px;
            margin: 20px 0;
        }
        .main{
            width: 100px;
            height: 100px;
        }
    </style>

</head>

<body>
    <div class="main">
    <div class="flag">白棋走</div>
    <div class="chessMain">
        <!-- 第一行 -->
        <div class="first">
            <div class="chess"></div>
            <div class="chess"></div>
            <div class="chess"></div>
            <div class="chess"></div>
            <div class="chess"></div>
            <div class="chess"></div>
            <div class="chess"></div>
            <div class="chess"></div>
            <div class="chess"></div>
            <div class="chess"></div>
            <div class="chess"></div>
            <div class="chess"></div>
            <div class="chess"></div>
        </div>

        <!-- 第一行 -->
        <div class="second">
            <div class="chess"></div>
            <div class="chess"></div>
            <div class="chess"></div>
            <div class="chess"></div>
            <div class="chess"></div>
            <div class="chess"></div>
            <div class="chess"></div>
            <div class="chess"></div>
            <div class="chess"></div>
            <div class="chess"></div>
            <div class="chess"></div>
            <div class="chess"></div>
            <div class="chess"></div>
        </div>        <!-- 第一行 -->
        <div class="second">
            <div class="chess"></div>
            <div class="chess"></div>
            <div class="chess"></div>
            <div class="chess"></div>
            <div class="chess"></div>
            <div class="chess"></div>
            <div class="chess"></div>
            <div class="chess"></div>
            <div class="chess"></div>
            <div class="chess"></div>
            <div class="chess"></div>
            <div class="chess"></div>
            <div class="chess"></div>
        </div>        <!-- 第一行 -->
        <div class="second">
            <div class="chess"></div>
            <div class="chess"></div>
            <div class="chess"></div>
            <div class="chess"></div>
            <div class="chess"></div>
            <div class="chess"></div>
            <div class="chess"></div>
            <div class="chess"></div>
            <div class="chess"></div>
            <div class="chess"></div>
            <div class="chess"></div>
            <div class="chess"></div>
            <div class="chess"></div>
        </div>        <!-- 第一行 -->
        <div class="second">
            <div class="chess"></div>
            <div class="chess"></div>
            <div class="chess"></div>
            <div class="chess"></div>
            <div class="chess"></div>
            <div class="chess"></div>
            <div class="chess"></div>
            <div class="chess"></div>
            <div class="chess"></div>
            <div class="chess"></div>
            <div class="chess"></div>
            <div class="chess"></div>
            <div class="chess"></div>
        </div>        <!-- 第一行 -->
        <div class="second">
            <div class="chess"></div>
            <div class="chess"></div>
            <div class="chess"></div>
            <div class="chess"></div>
            <div class="chess"></div>
            <div class="chess"></div>
            <div class="chess"></div>
            <div class="chess"></div>
            <div class="chess"></div>
            <div class="chess"></div>
            <div class="chess"></div>
            <div class="chess"></div>
            <div class="chess"></div>
        </div>        <!-- 第一行 -->
        <div class="second">
            <div class="chess"></div>
            <div class="chess"></div>
            <div class="chess"></div>
            <div class="chess"></div>
            <div class="chess"></div>
            <div class="chess"></div>
            <div class="chess"></div>
            <div class="chess"></div>
            <div class="chess"></div>
            <div class="chess"></div>
            <div class="chess"></div>
            <div class="chess"></div>
            <div class="chess"></div>
        </div>        <!-- 第一行 -->
        <div class="second">
            <div class="chess"></div>
            <div class="chess"></div>
            <div class="chess"></div>
            <div class="chess"></div>
            <div class="chess"></div>
            <div class="chess"></div>
            <div class="chess"></div>
            <div class="chess"></div>
            <div class="chess"></div>
            <div class="chess"></div>
            <div class="chess"></div>
            <div class="chess"></div>
            <div class="chess"></div>
        </div>        <!-- 第一行 -->
        <div class="second">
            <div class="chess"></div>
            <div class="chess"></div>
            <div class="chess"></div>
            <div class="chess"></div>
            <div class="chess"></div>
            <div class="chess"></div>
            <div class="chess"></div>
            <div class="chess"></div>
            <div class="chess"></div>
            <div class="chess"></div>
            <div class="chess"></div>
            <div class="chess"></div>
            <div class="chess"></div>
        </div>        <!-- 第一行 -->
        <div class="second">
            <div class="chess"></div>
            <div class="chess"></div>
            <div class="chess"></div>
            <div class="chess"></div>
            <div class="chess"></div>
            <div class="chess"></div>
            <div class="chess"></div>
            <div class="chess"></div>
            <div class="chess"></div>
            <div class="chess"></div>
            <div class="chess"></div>
            <div class="chess"></div>
            <div class="chess"></div>
        </div>        <!-- 第一行 -->
        <div class="second">
            <div class="chess"></div>
            <div class="chess"></div>
            <div class="chess"></div>
            <div class="chess"></div>
            <div class="chess"></div>
            <div class="chess"></div>
            <div class="chess"></div>
            <div class="chess"></div>
            <div class="chess"></div>
            <div class="chess"></div>
            <div class="chess"></div>
            <div class="chess"></div>
            <div class="chess"></div>
        </div>        <!-- 第一行 -->
        <div class="second">
            <div class="chess"></div>
            <div class="chess"></div>
            <div class="chess"></div>
            <div class="chess"></div>
            <div class="chess"></div>
            <div class="chess"></div>
            <div class="chess"></div>
            <div class="chess"></div>
            <div class="chess"></div>
            <div class="chess"></div>
            <div class="chess"></div>
            <div class="chess"></div>
            <div class="chess"></div>
        </div>        <!-- 第一行 -->
        <div class="second">
            <div class="chess"></div>
            <div class="chess"></div>
            <div class="chess"></div>
            <div class="chess"></div>
            <div class="chess"></div>
            <div class="chess"></div>
            <div class="chess"></div>
            <div class="chess"></div>
            <div class="chess"></div>
            <div class="chess"></div>
            <div class="chess"></div>
            <div class="chess"></div>
            <div class="chess"></div>
        </div>

    </div>

    <div class="clear">重开一局</div>

</div>
</body>

</html>